Elements on this page provide you with a complete set of container styles for images with associated text.
Images should use the Bootstrap class "img-responsive" so that they are up to as wide as their column. The containers below use the Bootstrap "col-sm-*" classes,, so the width proportions specified are displayed for screens from tablet to desktop widths but will take up the full width of the page for phone screen sizes. Images that do not take up the entire width of a column will be top-centered within it, so the image width dimension should be wide enough to accommodate the state of the column in mobile, tablet, and desktop view.
See the section "Half Width Vertical Image & Text Containers" to see how images can be cropped automatically using CSS in some situations.
This section requires the following: External:
Internal:
Containers with a full-height image on one side and text on the other use two column containers, one containing the image and the other containing the text.
Both column use the Bootstrap class "col-sm-6".
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus aliquam aliquid aut eligendi esse eveniet excepturi, expedita hic illo ipsa labore magnam mollitia non, pariatur, quasi reiciendis soluta voluptas more
The image column uses the "col-sm-8" class. The text column uses the "col-sm-4" class.
Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti more
The image column uses the "col-sm-4" class. The text column uses the "col-sm-8" class.
Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh more
The image column uses the "col-sm-9" class. The text column uses the "col-sm-3" class. more
The image column uses the "col-sm-3" class. The text column uses the "col-sm-9" class.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus aliquam aliquid aut eligendi esse eveniet excepturi, expedita hic illo ipsa labore more
Both column use the Bootstrap class "col-sm-4".
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus aliquam aliquid aut eligendi esse eveniet excepturi, expedita hic illo ipsa labore more
Both column use the Bootstrap class "col-sm-3".
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus aliquam aliquid aut eligendi esse eveniet excepturi, expedita hic illo ipsa labore more
Containers width a full-height image with text below one column containers
Text Content inside a column width a full width image needs to be wrapped inside a div with the class "img-container-text-content" to give it enough padding. This container is using the "col-sm-12" class.
Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos more
The two images below are the same but are cropped to fit the container and positioned from the top. Add the class "img-fit" to an image in combination with one of the three classes below. "img-fit" will increases or decreases the size of the image to fill the box while preserving its aspect-ratio. TO make the image crop, add the class "crop".
"img-fit" will automatically center the image, but to position it from the top, add the class, "position-bottom". To instead position it from the bottom, add the class "position-bottom".
Text Content inside a column width a full width image needs to be wrapped inside a div with the class "img-container-text-content" to give it enough padding. This container is using the "col-sm-6" class.
Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos more
Text Content inside a column width a full width image needs to be wrapped inside a div with the class "img-container-text-content" to give it enough padding. This container is using the "col-sm-6" class.
Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos more
Text Content inside a column width a full width image needs to be wrapped inside a div with the class "img-container-text-content" to give it enough padding. This container is using the "col-sm-4" class.more
Text Content inside a column width a full width image needs to be wrapped inside a div with the class "img-container-text-content" to give it enough padding. This container is using the "col-sm-4 class.
more
Text Content inside a column width a full width image needs to be wrapped inside a div with the class "img-container-text-content" to give it enough padding. This container is using the "col-sm-3" class more
Text Content inside a column width a full width image needs to be wrapped inside a div with the class "img-container-text-content" to give it enough padding. This container is using the "col-sm-3" class more